<template>
  <div class="checkBox">
    <div
      class="icons-wrap"
      @click="setActive(0)"
      :class="this.data.activeNum.indexOf(0) != -1 ? 'icons-active' : ''"
    >
      <i class="iconjiacu iconfont" title="加粗"></i>
    </div>
    <div
      class="icons-wrap"
      @click="setActive(1)"
      :class="this.data.activeNum.indexOf(1) != -1 ? 'icons-active' : ''"
    >
      <i class="iconxieti iconfont" title="斜体"></i>
    </div>
    <div
      class="icons-wrap"
      @click="setActive(2)"
      :class="this.data.activeNum.indexOf(2) != -1 ? 'icons-active' : ''"
    >
      <i class="iconxiahuaxian iconfont" title="下划线"></i>
    </div>
    <div
      class="icons-wrap"
      @click="setActive(3)"
      :class="this.data.activeNum.indexOf(3) != -1 ? 'icons-active' : ''"
    >
      <i class="iconfuwenbenbianjiqi_zhonghuaxian iconfont" title="中划线"></i>
    </div>
  </div>
</template>
<script >
import { defineComponent, reactive } from "vue";
export default defineComponent({
  setup(props, ctx) {
    const data = reactive({
      activeNum: [],
    });

    function setActive(n) {
      const newActive = data.activeNum;
      // console.log(n);
      const num = newActive.indexOf(n);
      num == -1 ? newActive.push(n) : newActive.splice(num, 1);
      data.activeNum = newActive;
      this.emitActiveNum();
      // const num = newActive.indexOf(n);
      // console.log(num);

      // console.log(newActive);
    }
    function emitActiveNum() {
      // console.log(ctx);
      ctx.emit("getActiveNum", data.activeNum);
    }

    return {
      data,
      setActive,
      emitActiveNum,
    };

    // setActive(n: number) {
    //     const newActive: any[] = this.activeNum;
    //     const num = newActive.indexOf(n);
    //     num == -1 ? newActive.push(n) : newActive.splice(num, 1);
    //     this.activeNum = newActive;
    //     this.emitActiveNum();
    //     // console.log(this.activeNum);
    //     // this.activeNum.push(n);
    //   };
    //   emitActiveNum() {
    //     this.$emit("getActiveNum", this.activeNum);
    //   };
  },
});
// {
//   // data(): { activeNum: unknown[] } {
//   //   return { activeNum: [] };
//   // },
//   // data() {
//   //   return {
//   //     activeNum: [],
//   //   };
//   // },
//   // methods: {
//   //   setActive(n: number) {
//   //     const newActive: any[] = this.activeNum;
//   //     const num = newActive.indexOf(n);
//   //     num == -1 ? newActive.push(n) : newActive.splice(num, 1);
//   //     this.activeNum = newActive;
//   //     this.emitActiveNum();
//   //     // console.log(this.activeNum);
//   //     // this.activeNum.push(n);
//   //   },
//   //   emitActiveNum() {
//   //     this.$emit("getActiveNum", this.activeNum);
//   //   },
//   // },
// };
</script>

<style lang="scss">
@import url("//at.alicdn.com/t/font_2298406_to0vuayd5e.css");
.checkBox {
  display: flex;
  cursor: pointer;
  width: 60%;
  .icons-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    height: 30px;
    align-items: center;
  }
  .icons-wrap:hover {
    background-color: #f6f7f8;
  }
  .icons-active {
    background-color: #f6f7f8;
  }
}
</style>